<!DOCTYPE html>
<html style="background:rgba(0,0,0,0)">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="date=no" />
    <title>选择生日</title>
    <link href="../../css/aui.css" rel="stylesheet" type="text/css">
    <link href="../../css/api.css" rel="stylesheet" type="text/css">
    <link href="../../mui/mui.min.css" rel="stylesheet" type="text/css">
    <link href="../../mui/mui.picker.css" rel="stylesheet" type="text/css">
    <link href="../../mui/mui.poppicker.css" rel="stylesheet" type="text/css">
    <style>
        html,
        body {
            background: rgba(0, 0, 0, 0);
            margin: 0;
            height: 100vh;
        }

        .mui-poppicker-header {
            background-color: #fff;
            border: 0;
            position: relative;
            z-index: 999;
            height: 2.5rem;
            padding: 0 0.85rem;
            border-radius: 0.2rem 0.2rem 0 0;
        }

        .mui-poppicker-body {
            height: 9.1rem;
        }

        .mui-poppicker-header .mui-btn {
            border: 0;
            color: #222224;
            font-size: 0.7rem;
            padding: 0;
            line-height: 2.5rem;
        }

        .mui-btn.mui-poppicker-btn-ok {
            color: #5AC2FF;
            font-size: 0.7rem;
            background: none;
        }

        .mui-poppicker {
            border: 0;
            box-shadow: none;
        }

        .mui-poppicker-body {
            position: relative;
            border-top: 0.5px solid #eaeaea;
        }
        /*.mui-poppicker-body:before{
        content: "";
        position: absolute;
        top:0;
        left:0;
        height: 1px;
        width: 100%;
        background: #eaeaea;
        transform: scaleY(0.5);
        -webkit-transform: scaleY(0.5);
        transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
    }*/

        .mui-pciker-rule-ft {
            border-top: none;
            border-bottom: none;
        }

        .mui-pciker-list li {
            color: #B5B6BA;
            font-size: 0.75rem;
        }

        .mui-backdrop {
            display: none;
        }

        .mui-pciker-list li.highlight {
            font-size: 0.9rem;
            color: #222224;
        }

        #layerDiv {
            position: absolute;
            top: 0;
            z-index: 9;
            left: 0;
            background: rgba(0, 0, 0, 0.5);
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body style="background:rgba(0,0,0,0)">
    <div id="layerDiv" tapmode onclick="fnCloseLayer()"></div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../mui/mui.min.js"></script>
<script type="text/javascript" src="../../mui/mui.bottom-picker.js"></script>
<script type="text/javascript" src="../../mui/mui.poppicker.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-data.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../res/pro.js"></script>
<script type="text/javascript">
    var $S;
    var USER;
    var activeIndex = [0, 0, 0];
    var picker;
    apiready = function() {
        $S = SERVICE();
        USER = USER();
        // _proList = data.listData;
        // if (api.pageParam.provinceCode != '') {
        //     for (var i = 0; i < _proList.length; i++) {

        //         if (_proList[i].id == api.pageParam.provinceCode) {
        //             activeIndex[0] = i;
        //             if (api.pageParam.cityCode != '') {
        //                 for (var x = 0; x < _proList[i].children.length; x++) {
        //                     if (_proList[i].children[x].id == api.pageParam.cityCode) {
        //                         activeIndex[1] = x;
        //                         if (api.pageParam.countyCode != '') {
        //                             for (var y = 0; y < _proList[i].children[x].children.length; y++) {
        //                                 if (_proList[i].children[x].children[y].id == api.pageParam.countyCode) {
        //                                     activeIndex[2] = y;
        //                                 }
        //                             }
        //                         }
        //                     }
        //                 }
        //             }
        //         }
        //     }
        // }
        fnJudge()
        getData();
    };
    
    function getData() {
        var params = {};
        var callback = function(data) {
            _proList = data.listData;
            if (api.pageParam.provinceCode != '') {
                for (var i = 0; i < _proList.length; i++) {

                    if (_proList[i].id == api.pageParam.provinceCode) {
                        activeIndex[0] = i;
                        if (api.pageParam.cityCode != '') {
                            for (var x = 0; x < _proList[i].children.length; x++) {
                                if (_proList[i].children[x].id == api.pageParam.cityCode) {
                                    activeIndex[1] = x;
                                    if (api.pageParam.countyCode != '') {
                                        for (var y = 0; y < _proList[i].children[x].children.length; y++) {
                                            if (_proList[i].children[x].children[y].id == api.pageParam.countyCode) {
                                                activeIndex[2] = y;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            fnJudge()
        };
        POST('apiTbAppUser/findProvCityCountyList', params, callback);
    }

    function fnJudge() {
        if (_proList && _proList.length > 0) {
            fnOpenMui(); //打开生日选择器模块
        } else {
            setTimeout(function() {
                fnJudge()
            }, "100")
        }
    }

    function fnOpenMui() {
        mui.init();
        picker = new mui.PopPicker({
            layer: 3,
            buttons: ['取消', '完成']
        });
        picker.setData(_proList);
        for (var i = 0; i < activeIndex.length; i++) {
            picker.pickers[i].setSelectedIndex(activeIndex[i]);
        }
        picker.show(function(items) {
            if (items && items.length > 0) {
                console.log(JSON.stringify(items))
                var provinceCode = items[0].id;
                var cityCode = items[1].id;
                var countyCode = items[2].id;
                var areaName = items[0].name + " " + items[1].name + " " + items[2].name;
                api.execScript({
                    name: api.pageParam.winName,
                    frameName: api.pageParam.frameName,
                    script: 'fnSetArea("' + provinceCode + '","' + cityCode + '","' + countyCode + '","' + areaName + '");'
                });
            }
            fnCloseLayer()
        });
    }

    function fnCloseLayer() {
        api.closeFrame();
    }
</script>

</html>
